<template>
	<view class="myinfo">
		<view class="infolist">
			<view class="info_item">
				<text>更换头像</text>
				<view @click="sheet.show = true">
					<image class="info_root" :src="user.photo"></image>
					<image src="../../static/img/my_back.png"></image>
				</view>
			</view>
			<view class="info_item">
				<text>昵称</text>
				<text>{{user.realname}}</text>
			</view>
			<view class="info_item">
				<text>我的账号</text>
				<text>{{user.mobile}}</text>
			</view>
			<view class="info_item" @click="navchangPw()">
				<text>修改密码</text>
				<image src="../../static/img/my_back.png"></image>
			</view>
		</view>
		
		<u-action-sheet :list="sheet.list" v-model="sheet.show" @click="selectImg"></u-action-sheet>
	</view>
</template>

<script>
	import { userupdate,uploadimg } from '../../api/index.js'
	export default {
		data() {
			return {
				sheet:{
					list: [{
						text: '拍照'
					}, {
						text: '从相册中选择' 
					}],
					show: false
				}
			}
		},
		onLoad() {

		},
		methods: {
			selectImg:function(index){
				let that = this;
				let sourceType = [];
				if(index==0){
					sourceType = 'camera';
				}else{
					sourceType = 'album';
				}
				cm.chooseImage({
					count:1,
					sourceType:sourceType,
					success:function(res){
						let base64Obj = JSON.parse(res);
						let baseStr = '';
						if(index == 0){
							baseStr = base64Obj.base64String;
						}else{
							baseStr = base64Obj.base64StringArray[0];
						}
						that.updateImgfun(baseStr);
					},
					fail:function(){
						uni.showToast({
							icon:'none',
							title:'获取图片失败'
						})
					}
				});
			},
			//修改图片逻辑
			async updateImgfun(base64){
				let that = this;
				// console.log(base64)
				let uploadimgData = await uploadimg({img:base64});
				if(uploadimgData.code == 0){
					let userupdateData = await userupdate({photo:uploadimgData.data.url})
					uni.showModal({
						title:'提示',
						content: userupdateData.msg,
						complete:function(){
							//vuex执行更新当前用户信息的方法(更新头像信息)
							that.$store.dispatch('global/setUser');
							that.sheet.show = false;
						}
					})
				}else{
					uni.showToast({
						title: uploadimgData.msg,
						icon: 'none'
					})
				}
			},
			navchangPw:function(){
				uni.navigateTo({
					url: '../changpw/changpw'
				});
			}
		},
		computed:{
			user(){
				return this.$store.state.global.user
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myinfo{
		height: 100%;
		background-color: #F5F5F5;
		.infolist{
			background-color: #FFFFFF;
			padding: 0 30rpx;
			font-size: $uni-font-size-base;
			.info_item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 0;
				border-bottom: 1rpx $uni-solid-color solid;
				image{
					width: 36rpx;
					height: 36rpx;
					&.info_root{
						width: 72rpx;
						height: 72rpx;
						border-radius: 100%;
						vertical-align: bottom;
						margin-bottom: -10rpx;
					}
				}
				&:last-of-type{
					border: none;
				}
			}
		}
	}
</style>
